<template>
  <div class="content">
    <el-card class="box_card">
      <!-- :inline="true" label-width="180px"  size="mini"-->
      <el-form
        label-position="left"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
      >
        <!-- <el-form-item label="头像" style="" prop="avatar_file">
          <uploadQualifications
            @changedata="changeIDAvatar_file"
          ></uploadQualifications>
        </el-form-item> -->

        <el-row type="flex" justify="space-between">
          <el-form-item label="省市县" style="" prop="selectedArr">
            <el-cascader
              clearable
              ref="cascaderAddr"
              size="large"
              :options="options"
              @change="selectedOptionsChange"
              v-model="ruleForm.selectedArr"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="店家名称" prop="store_name">
            <el-input v-model="ruleForm.store_name"></el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-form-item label="申请人姓名" prop="boss_name">
            <el-input v-model="ruleForm.boss_name"></el-input>
          </el-form-item>
          <el-form-item label="申请人电话" prop="boss_phone">
            <el-input v-model="ruleForm.boss_phone"></el-input> </el-form-item
        ></el-row>

        <el-row type="flex" justify="space-between">
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="二次密码" prop="password2">
            <el-input v-model="ruleForm.password2"></el-input> </el-form-item
        ></el-row>

        <el-row type="flex" justify="space-between">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="行业分类" prop="classification">
            <el-input
              v-model="ruleForm.classification"
            ></el-input> </el-form-item
        ></el-row>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="go">返回登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import uploadQualifications from "@/components/UploadExcel/uploadQualifications.vue";
import { regionData } from "element-china-area-data";
import { mapState } from "vuex";
export default {
  components: { uploadQualifications },
  computed: {
    isStore_id() {
      return this.$store.state.user.store_id;
    },
  },
  data() {
    let checkPwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入确认密码"));
      } else if (value != this.ruleForm.password) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {},
      rules: {
        store_name: [
          { required: true, message: "请输入店家名称", trigger: "blur" },
        ],
        boss_name: [
          { required: true, message: "请输入申请人姓名", trigger: "blur" },
        ],
        boss_phone: [
          { required: true, message: "请输入申请人电话", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        password2: [
          {
            validator: checkPwd,
            required: true,
            trigger: "blur",
          },
        ],
        // avatar_file: [
        //   { required: true, message: "请上传头像文件", trigger: "change" },
        // ],
        province: [
          {
            type: "date",
            required: true,
            message: "请选择省份",
            trigger: "change",
          },
        ],
        city: [
          {
            type: "date",
            required: true,
            message: "请选择市",
            trigger: "change",
          },
        ],
        district: [
          {
            type: "date",
            required: true,
            message: "请选择县",
            trigger: "change",
          },
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        classification: [
          { required: true, message: "请输入行业分类", trigger: "blur" },
        ],
        selectedArr: [
          { required: true, message: "请选择地区", trigger: "blur" },
        ],
      },
      options: regionData,
      selectedArr: [],
    };
  },
  methods: {
    // changeIDAvatar_file({ file }) {
    //     console.log(file,'222');
    //   this.ruleForm.avatar_file = file;
    //   console.log(this.ruleForm,'222');
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Settled();
          console.log(this.ruleForm, "ruleForm");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    Settled() {
      delete this.ruleForm.selectedArr;
      this.https("/store_register_api", this.ruleForm)
        .then((result) => {
          console.log("result", result);
          if (result.store_id) {
            this.$store.dispatch("user/store_id", result.store_id);
            this.goUploadQualifications()
          }
        })
        .catch((err) => {});
    },
    selectedOptionsChange() {
      //获取省市县
      if (this.$refs["cascaderAddr"].getCheckedNodes().length > 0) {
        const regionList =
          this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels;
        this.ruleForm.province = regionList[0];
        regionList[1] == "市辖区"
          ? (this.ruleForm.city = regionList[0])
          : (this.ruleForm.city = regionList[1]);
        this.ruleForm.district = regionList[2];
      }
    },
    go() {
      this.$router.push("/login");
    },
    goUploadQualifications(){
        const loading = this.$loading({
        lock: true,
        text: "您已入驻店铺正在跳转上传资质",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        this.$router.push("/uploadQualifications");
        loading.close();
      }, 3000);
    }
  },
  mounted() {
    console.log(this.isStore_id)
    if (this.isStore_id) {
        this.goUploadQualifications()
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.box_card {
  width: 30%;
  //   height: 60%;
}
</style>
